<template>
  <div>
    <el-input v-model="search" placeholder="搜索用户" clearable />
    <PureTable
      max-height="50vh"
      :data="showUsers"
      :columns="columns"
      highlight-current-row
      @row-click="handleSelect"
    >
      <template #avatarSlot="{ row }">
        <el-avatar shape="square" :src="row.avatar" :size="40" />
      </template>
    </PureTable>
  </div>
</template>

<script setup lang="tsx">
import { UserRes } from '@/api/user'
import { computed, onMounted, ref } from 'vue'
const search = ref('')
const showUsers = computed(() => {
  return props.users.filter(
    user =>
      user.nickname.includes(search.value) ||
      user.username.toString().includes(search.value)
  )
})

const emit = defineEmits<{
  select: [id: number]
}>()
const props = defineProps<{
  users: UserRes[]
}>()
const columns: TableColumnList = [
  {
    label: '头像',
    prop: 'avatar',
    slot: 'avatarSlot'
  },
  {
    label: '昵称',
    prop: 'nickname'
  }
]

const handleSelect = ({ id }) => {
  emit('select', id)
}
onMounted(() => {})
</script>

<style scoped></style>
